import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Switch, Redirect } from 'react-router'
import { PrivateRoute } from 'components/route'
import Styled from 'styled-components'
import { users as usersDuck } from 'ducks'
import List from './list'
import Invite from './inviteTeamMember'
import NewTeam from './newTeam'
import EditTeam from './editTeam'

const StyledContainer = Styled.div`
  width: 100%;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 30px;
  overflow-y: scroll;
`
class Teams extends Component {
  componentDidMount() {
    const { setParentActiveItem } = this.props
    setParentActiveItem('teams')
  }

  render() {
    const { location, match, org } = this.props
    return (
      <StyledContainer>
        <Switch location={location}>
          <PrivateRoute
            path={`${match.url}/list/:path*`}
            render={props => <List {...props} org={org} />}
            exact
          />
          <PrivateRoute
            path={`${match.url}/invite/:path*`}
            render={props => <Invite {...props} org={org} />}
            exact={false}
          />
          <PrivateRoute
            path={`${match.url}/newTeam/:path*`}
            render={props => <NewTeam {...props} org={org} />}
            exact={false}
          />
          <PrivateRoute
            path={`${match.url}/edit/:path*`}
            render={props => <EditTeam {...props} org={org} />}
            exact={false}
          />
          <Redirect from={`${match.url}`} to={`${match.url}/list`} />
        </Switch>
      </StyledContainer>
    )
  }
}

const mapDispatchToProps = {
  actionSetUserMav: usersDuck.creators.actionSetUserMav,
}

export default connect(
  null,
  mapDispatchToProps,
)(Teams)
